<!DOCTYPE html>
<html>
<head>
	<title>component practice</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"> </script>
	<style type="text/css">
		body div div{
			margin-left: 20px;
			padding-bottom: 10px;
		}
		body div div span{
			display:block;
			padding-bottom: 10px;
		}
	</style>
</head>
<body>
	<div>
		<h2>component practice</h2>
		<div id="global">
			<h3>global component simple application:</h3>
			<global-component></global-component>
		</div>
		<div id='local'>
			<h3>local component simple application:</h3>
			<local></local>
		</div>
		<div id="prop">
			<h3>prop transfer parameters simple application:</h3>
			<div><input type="" name="" v-model="parentMsg"></div>
			<child v-bind:message = "parentMsg"></child>
		</div>
		<div id="prop-for">
			<h3>prop transfer parameters and v-for tag simple application:</h3>
			<ol>
				<prop_for v-for = "i in persons" v-bind:item = "i" ></prop_for>
			</ol>
		</div>
		<!-- 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！ -->
		<div>
			<h3>prop transfer parameters and v-for tag simple application:</h3>
			<div id = "event_element">
				{{total}}
				<event_component v-on:increment = "incrementTotal" ></event_component>
				<!-- <input type="button" name="" value="+" v-on:increase = "increment">{{total}} -->
			</div>
			

		</div>


	</div>


<script type="text/javascript">
	// global component register
	Vue.component('global-component',{
		template:'<div>global component</dvi>'
	})
	var global = new Vue({
		el:'#global'
	})

    // declare variable for component
	var child = {
		template:'<div>local component </div>'
	}
	var local = new Vue({
		el:'#local',
		// local component register
		components:{
			'local':child
		}
	})

	Vue.component("child", {
		props: ['message'],
		template:"<div>{{message}}</div>"
	})

	var prop = new Vue({
		el:"#prop",
		data:{
			parentMsg:"parent variable"
		}
	})

    // declare component
	var prop_for = {
		props: ['item'],
		template:'<li> {{item.name}} , {{item.age}} , {{item.gender}} </li>'
	}

	var props_for = new Vue({
		el:"#prop-for",
		data:{
			persons:[
				{"name":"John","age":14,"gender":"man"},
				{"name":"Lily","age":21,"gender":"woman"},
				{"name":"Amy","age":18,"gender":"woman"},
				{"name":"Tim","age":16,"gender":"man"}
			]
		},
		components:{
			"prop_for":prop_for,
		}

	})

	 // declare component
 	var event_component = {
		data:function(){
			return {
				child_count:0
			}
		},
		/*template:'<input type = "button" v-on:click = "increase()" value="{child_count}" > {{child_count}}',*/
		template: '<button v-on:click="increase">{{ child_count }}</button>',
		methods:{
			increase:function(){
				this.child_count ++;
				this.$emit('increment');
			}
		}
	}

	var event_component_vue = new Vue({
		el:"#event_element",
		data:{
			total:0
		},
		methods:{
			incrementTotal:function(){
				this.total += 1 ;
			}
		},
		components:{
			"event_component":event_component
		}

	})

</script>


</body>
</html>